<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}" media="all"/>
</head>
<body class="childrenBody">
<div class="layui-row">
    <!--左侧树-->
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
        <div class="grid-demo grid-demo-bg1">
            <ul id="permissionTree" class="dtree" data-id="0"></ul>
        </div>
    </div>

    <!--右侧表-->
    <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
        <div class="grid-demo">
            <!--搜索框-->
            <blockquote class="layui-elem-quote" style="margin: 20px;">
                <div style="margin-right: 20px;">
                    <form class="layui-form" style="text-align: center">
                        <!-- 商品产地 -->
                        <div class="layui-input-inline" style="margin-left: 10px;margin-right: 10px;">
                            <input type="text" name="placeName" id="s_goodsPlaceName" placeholder="请输入权限名称"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                        <!-- 查询和添加按钮 -->
                        <a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSearch">搜索</a>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                    </form>
                </div>
            </blockquote>

            <!--表-->
            <div style="margin: 20px;">
                <table class="layui-hide" id="permission" lay-filter="permissionFilter"></table>
            </div>

            <!--表格框的操作-->
            <script type="text/html" id="barDemo">
                <a shiro:hasPermission="permission:update" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a shiro:hasPermission="permission:delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            </script>

            <!--表格框工具条-->
            <script type="text/html" id="toolbarDemo">
                <a shiro:hasPermission="menu:add" class="layui-btn layui-btn-sm" lay-event="add" id="doAdd">添加权限</a>
            </script>

            <!-- 添加或修改权限的弹出层 -->
            <div id="addOrUpdateDiv" style="display: none;padding: 20px;">
                <form class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm" style="margin-top: 20px;">
                    <!--添加商品产地-->
                    <div class="layui-form-item" style="text-align: center;">
                        <div class="layui-inline">
                            <label class="layui-form-label">父级菜单</label>
                            <div class="layui-input-inline" style="width: 500px;">
                                <input type="hidden" name="pid">
                                <ul id="permissionDTreeInput" class="dtree" data-id="0"></ul>
                            </div>
                        </div>
                    </div>
                    <!-- 提交和重置按钮 -->
                    <div class="layui-input-block" style="align-items: center;">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSubmit">提交
                        </button>
                        <button type="reset" id="reloadFrame" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </form>
            </div>
            <!-- 添加商品产地的弹出层结束 -->
        </div>
    </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<!--<script type="text/javascript" src="/layui_ext/dtree/dtree.js"></script>-->
<script>
    layui.extend({
        dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree', 'element', 'form', 'jquery', 'layer', 'table'], function () {
        var dtree = layui.dtree;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;

        var tableIndex;
        // 初始化树
        var data = dtree.render({
            elem: "#permissionTree",
            /*data : nodes.data,*/
            dataFormat: "list",
            dataStyle: "layuiStyle",
            response: {message: "msg", statusCode: 0},
            method: "get",
            url: "/permission/loadPermissionDTreeJson"
            //url: "/layui_ext/dtree1.json" // 使用url加载（可与data加载同时存在）
        });

        // 初始化输入框树
        dtree.renderSelect({
            elem: "#permissionDTreeInput",
            /*data : nodes.data,*/
            dataFormat: "list",
            dataStyle: "layuiStyle",
            response: {message: "msg", statusCode: 0},
            method: "get",
            url: "/permission/loadPermissionDTreeJson"
            //url: "/layui_ext/dtree1.json" // 使用url加载（可与data加载同时存在）
        });


        // 绑定节点点击
        dtree.on("node('permissionTree')", function (obj) {
            //layer.msg(JSON.stringify(obj.param));
            reloadTable(obj.param.nodeId);
        });

        function reloadTable(id) {
            tableIndex.reload({
                where: {
                    id: id
                },
                page: {
                    curr: 1
                }
            })
        }

        tableIndex = table.render({
            elem: '#permission'
            , url: '/permission/loadPermissions'
            , page: true //开启分页
            , toolbar: true //开启头部工具栏，并为其绑定左侧模板
            , title: '权限表'
            , method: 'get'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , limits: [10, 20, 50, 100]
            , defaultToolbar: ['filter', 'print', 'exports']
            , cols: [
                [
                    {field: 'id', title: 'ID', sort: true, align: 'center'},
                    {field: 'title', title: '权限名称', align: 'center'},
                    {field: 'percode', title: '权限编码', align: 'center'},
                    {
                        field: 'open', title: '是否展开', align: 'center', templet: function () {
                            return "<span>否</span>";
                        }
                    },
                    {
                        field: 'available', title: '是否可用', align: 'center', templet: function (permission) {
                            return permission.available == 1 ? "<span>是</span>" : "<span>否</span>";
                        }
                    },
                    {field: 'ordernum', title: '排序码', align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center'}
                ]
            ]
        });

        //获取弹出层的索引
        var addIndex;
        //监听工具栏的事件
        table.on('toolbar(permissionFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    addIndex = layer.open({
                        type: 1,
                        title: ['添加部门', 'color:#fff;background-color:#01AAED;'],
                        //content属性为打开某个定义好的
                        content: $('#addOrUpdateDiv'),
                        area: ['1000px', '600px'],
                        //这个函数是防止打开弹窗后遮挡屏幕
                        success: function (layer) {
                            var mask = $(".layui-layer-shade");
                            mask.appendTo(layer.parent());
                            //其中：layer是弹层的DOM对象
                            //每次打开弹出层时刷新内容
                            //$('#reloadFrame').click();
                            $("#dataFrm")[0].reset();
                        }
                    });
                    break;
            }
        });

        // 绑定节点点击
        dtree.on("node('permissionDTreeInput')", function (obj) {
            //layer.msg(JSON.stringify(obj.param));
            //window.parent.right.reloadTable(obj.param.nodeId);
            //alert(obj.param.nodeId);
        });

        //监控添加事件
        form.on("submit(doAdd)", function (data) {
            //alert(data.field);
            /*$.post('/system/goodsPlace/addGoodsPlace', data.field, function (res) {
                if (res.code == 0) {
                    layer.confirm('是否继续录入？', {
                        btn: ['继续', '取消'] //按钮
                    }, function (myself) {
                        //无论继续输入还是取消重置按钮会被点击
                        $('#reloadFrame').click();
                        layer.close(myself);
                    }, function () {
                        //无论继续输入还是取消重置按钮会被点击
                        $('#reloadFrame').click();
                        layer.close(addIndex);
                    });
                }else {
                    layer.msg("添加失败");
                }
                //不管成功还是失败,父级页面都要刷新
                tableData.reload();
            });*/
            //要应用ajax提交,所以return false
            return false;
        });
        //添加事件结束

        //监听工具条的事件
        table.on('tool(permissionFilter)', function (obj) {
            //userTable是数据表格中lay-filter对应的事件
            var event = obj.event;
            var permissionData = obj.data;
            switch (event) {
                //修改事件开始
                case 'edit':
                    //获取修改商品产地信息弹出层的索引
                    var editIndex;
                    //修改楼栋信息弹出层
                    editIndex = layer.open({
                        type: 1,
                        title: '修改部门信息',
                        //content属性为打开某个定义好的
                        content: $('#addOrUpdateDiv'),
                        area: ['1000px', '600px'],
                        success: function (layer) {
                            //防止打开弹窗后遮挡屏幕
                            var mask = $(".layui-layer-shade");
                            mask.appendTo(layer.parent());
                            $("#dataFrm")[0].reset();
                            //其中：layer是弹层的DOM对象
                            form.val('dataFrm', permissionData);
                            if (permissionData.pid == 0) {
                                dtree.dataInit("permissionDTreeInput", 1);
                                dtree.selectVal("permissionDTreeInput");
                            } else {
                                dtree.dataInit("permissionDTreeInput", permissionData.pid);
                                dtree.selectVal("permissionDTreeInput");
                            }
                            //console.log(formData);
                        }
                    });
                    break;
                //修改用户事件结束
            }
        })
    });
</script>
</body>
</html>